/**
 * Created by work on 17/3/15.
 */
import React from 'react'
import PropTypes from 'prop-types';
import Picker from './Picker';
import Config from '../../../Config'
class Panel extends React.Component {
  constructor(props) {
    super(props);
    this.list = []
    this.props.list.forEach(item => {
      this.list.push(item)
    });
    this.state = {
      selectedOption: this.props.list[0],
    };
   
  }
  render() {
    
    let opt = (
      <div className='box' style={style.box}>
        <Picker
          options={this.list}
          onChange={(value) => this.setState({selectedOption: value})}
          show={this.props.show}
        />
      </div>
    );
    return (
      <div
        style={Object.assign({}, style.shadow, {display: this.props.show ? 'block' : 'none'})}
      >
        <div style={style.panel}>
        <div style={style.action}>
            <div
              style={style.cancel}
              onClick={() => { this.props.onCancel(); }}
            >
              取消
            </div>
            <div
              style={style.confirm}
              onClick={() => {               
                const value = {
                  pass: `${this.state.selectedOption}`
                };
                this.props.onConfirm(value); //eslint-disable-line
              }}
            >
              确定
            </div>
          </div>
          <div style={style.mid}>
            {
              opt
            }
          </div>
        
        </div>
      </div>
    );
  }
}

Panel.propTypes = {
  show: PropTypes.bool.isRequired,
  onCancel: PropTypes.func.isRequired,
  // label: PropTypes.string.isRequired,
  minYear: PropTypes.number,
  maxYear:PropTypes.number,
  defaultIndex: PropTypes.array,
  onConfirm: PropTypes.func.isRequired,
  type: PropTypes.string
};

const  style = {
  shadow: {
      position: 'fixed',
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, .4)',
      zIndex: 999,
  },
  panel: {
      width: '100%',
      // height: '220px',
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: '#fff'
  },
  top: {
      height: '32px',
      lineHeight: '32px',
      textAlign: 'center',
      color:  Config.BaseColor,
      fontSize: '16px',
      fontWeight: 'bold',
      marginBottom:'12px'
  },
  small: {
      fontSize: '14px',
      fontWeight: 'normal',
      marginRight: '2px',
      marginLeft: '1px'
  },
  mid: {
      height: '190px'
  },
  box: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      paddingBottom:'10px',
      overFlow:'hidden'
  },
  title: {
      fontSize: '16px',
      color: Config.BaseColor,
  },
  label: {
      marginTop: '10px',
      height: '20px',
      fontSize: '14px',
      lineHeight: '30px',
      textAlign: 'center',
      color: Config.BaseColor,
  },
  action: {
      width: '100%',
      height: '60px',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      fontSize: '14px'
  },
  cancel: {
      margin: '0 20px',
      color: '#333'
  },
  confirm: {
      margin: '0 20px',
      color: Config.BaseColor,
  }
}
export default Panel;